<template>
	<view class="lucky">
		<view class="lucky-top">本期幸运儿</view>
		<view class="lucky-swiper">
			<view class="lucky-position" :style="{ top: move + 'px' }" id="lucky-curin">
				<view class="lucky-for" v-for="(item, index) in detail" :key="index">
					<view>{{item.name}}</view>
					<view>{{item.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commissionList:[],
				detail: [{
						name: '1010753897',
						text: '测试奖品1'
					}, {
						name: '1010753897',
						text: '测试奖品2'
					},
				],
				move: 0
			}
		},
		onShow() {
			let wirel = setInterval(() => {
				this.move--
			}, 50)
			let king = setInterval(() => {
				let detail = []
				for (let i = 1; i < this.detail.length; i++) {
					detail.push(this.detail[i])
				}
				detail.push(this.detail[0])
				this.detail = [...detail]
				this.move = 0
			}, 1550)
		},
		onLoad(options) {
			let detail = this.detail
			for (let i = 0; i < detail.length; i++) {
				detail[i].name = detail[i].name.substring(0, detail[i].name.length - 3) + '***'
			}
			this.detail = [...detail]
		},
		created () {
			this,getCommissionRes()
		},
		methods: {
			getCommissionRes(){
				this.$axios.request(this.$api.getCommissionRes,"GET",{
					page: 1,
					limit: 10,
					orderField: 'id',
					order: 'desc'
				}).then((val)=>{
					this.commissionList = val.data.list
					console.log('11111111111111111111')
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.lucky {
		width: 600rpx;
		height: 185px;
		margin: 50rpx auto;
		padding: 0 3%;
		color: #fff;
		background-image: linear-gradient(45deg, #9000ff, #5e00ff);
	}

	.lucky-top {
		width: 100%;
		float: left;
		overflow: hidden;
		font-weight: bold;
		font-size: 36rpx;
		height: 35px;
		line-height: 35px;
	}

	.lucky-swiper {
		width: 100%;
		height: 350rpx;
		float: left;
		overflow: hidden;
		position: relative;
	}

	.lucky-position {
		width: 100%;
		float: left;
		position: absolute;
	}

	.lucky-for {
		width: 100%;
		float: left;
		height: 30px;
		line-height: 30px;
	}

	.lucky-for>view {
		width: 50%;
		float: left;
		font-size: 24rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}

	.lucky-for>view:nth-child(2) {
		text-align: right;
	}
</style>
